<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>志愿帮助平台 - 注册</title>
    <meta name="keywords" content="志愿平台,志愿帮助平台,湖北工程学院,青年志愿者平台,青协,计算机学院,计算机与信息科学学院,计科,湖工青协,湖工">
    <meta name="description" content="青年志愿者平台是由计算机学院学生制作，面向于青协及全校学生的信息平台">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__PUBLIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__PUBLIC__/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__PUBLIC__/css/animate.min.css" rel="stylesheet">
    <link href="__PUBLIC__/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="__PUBLIC__/css/plugins/steps/jquery.steps.css" rel="stylesheet">
    <link href="__PUBLIC__/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="__PUBLIC__/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <title>志愿帮助平台-注册</title>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
</head>

<body class="gray-bg">
<div class="wrapper text-left wrapper-content animated fadeInDown">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>志愿平台 - 注册</h5>
                </div>
                <div class="ibox-content">
                    <h2>
                        注册
                    </h2>
                    <p>
                        请按照步骤注册
                    </p>

                    <form id="form" action="" class="wizard-big">
                        <h1>账户</h1>
                        <fieldset>
                            <h2>账户信息</h2>
                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label> 账号 *</label>
                                        <input id="username" name="username" type="text" class="form-control required">
                                    </div>
                                    <div class="form-group">
                                        <label>密码 *</label>
                                        <input id="password" name="password" type="password" class="form-control required">
                                    </div>
                                    <div class="form-group">
                                        <label>确认密码 *</label>
                                        <input id="confirm" name="confirm" type="password" class="form-control required">
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <h1>个人资料</h1>
                        <fieldset>
                            <h2>个人资料信息</h2>
                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label>姓名 *</label>
                                        <input id="name" name="name" type="text" class="form-control required">
                                    </div>
                                    <div class="form-group">
                                        <label>性别 *</label>
                                        <select name="sex" id="sex" class="form-control m-b required">
                                            <option value="1">男</option>
                                            <option value="2">女</option>
                                            <option value="3">不便透露</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>QQ *</label>
                                        <input id="qq" name="qq" type="text" class="form-control required">
                                    </div>
                                    <div class="form-group">
                                        <label>电话号码 *</label>
                                        <input id="phone" name="phone" type="tel" class="form-control required">
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <label>专业 *</label>
                                            <input id="major" name="major" type="text" class="form-control required">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                                    <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <!--TODO 专业和学院和部门使用联想辅助搜索-->
                                    <div class="form-group">
                                        <div class="input-group">
                                            <label>学院 *</label>
                                            <input id="college" name="college" type="text" class="form-control required">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                                    <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>部门</label>
                                        <input id="department" placeholder="非青协可不填写" name="department" type="text" class="form-control">
                                    </div>
                                </div>

                            </div>
                        </fieldset>
                        <h1>用户须知</h1>
                        <fieldset>
                            <div class="text-left" style="">
                                <h2>1.本站程序面向湖北工程学院全体学生开放</h2>
                                <h2>2.禁止通过本站进行不合法的行为</h2>
                                <h2>3.本站直接版权归属于计科青协，最终版权归属于计科-王宇哲及其团队</h2>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
<!--TODO 完成按钮点击后关闭-->
<!-- 全局js -->
<script src="__PUBLIC__/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__PUBLIC__/js/layui/layui.all.js"></script>
<script src="__PUBLIC__/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<script src="__PUBLIC__/js/plugins/steps/jquery.steps.min.js"></script>
<script src="__PUBLIC__/js/plugins/validate/jquery.validate.min.js"></script>
<script src="__PUBLIC__/js/plugins/validate/messages_zh.min.js"></script>
</body>
<script>
    $(document).ready(function () {

        $("#form").steps({
            bodyTag: "fieldset",
            onStepChanging: function (event, currentIndex, newIndex) {
                // Always allow going backward even if the current step contains invalid fields!
                if (currentIndex > newIndex) {
                    return true;
                }

                // Forbid suppressing "Warning" step if the user is to young
                if (newIndex === 3 && Number($("#age").val()) < 18) {
                    return false;
                }

                var form = $(this);

                // Clean up if user went backward before
                if (currentIndex < newIndex) {
                    // To remove error styles
                    $(".body:eq(" + newIndex + ") label.error", form).remove();
                    $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
                }

                // Disable validation on fields that are disabled or hidden.
                form.validate().settings.ignore = ":disabled,:hidden";

                // Start validation; Prevent going forward if false
                return form.valid();
            },
            onStepChanged: function (event, currentIndex, priorIndex) {
                $("#major").bsSuggest({
                    url:"../../Home/Home/MajorJson",
                    effectiveFields: ["Id","major_name"],
                    effectiveFieldsAlias: {"Id":"Id","major_name":"专业名称"},
                    keyField: "major_name",
                    idField:"Id",
                    autoMinWidth: true,
                    showBtn: false
                });
                $("#college").bsSuggest({
                    url:"../../Home/Home/CollegeJson",
                    effectiveFields: ["Id","college_name"],
                    effectiveFieldsAlias: {"Id":"Id","college_name":"学院名称"},
                    keyField: "college_name",
                    idField:"Id",
                    autoMinWidth: true,
                    showBtn: false
                });
                // Suppress (skip) "Warning" step if the user is old enough.
                if (currentIndex === 2 && Number($("#age").val()) >= 18) {
                    $(this).steps("next");
                }

                // Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
                if (currentIndex === 2 && priorIndex === 3) {
                    $(this).steps("previous");
                }
            },
            onFinishing: function (event, currentIndex) {
                var form = $(this);

                // Disable validation on fields that are disabled.
                // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
                form.validate().settings.ignore = ":disabled";

                // Start validation; Prevent form submission if false
                return form.valid();
            },
            onFinished: function (event, currentIndex) {
                layer.msg('提交...',{
                    icon:16,
                    shade:0.1
                })
                var username=$('#username').val();
                var password=$('#password').val();
                var name=$('#name').val();
                var sex=$('#sex').val();
                var qq=$('#qq').val();
                var phone=$('#phone').val();
                var major=$('#major').val();
                var college=$('#college').val();
                var department=$('#department').val();
                var flag=new RegExp("[-]");
                if (flag.test(username)){
                    layer.msg("用户名不能包含-");
                    return;
                }
                var data={
                    username:username,
                    password:password,
                    name:name,
                    sex:sex,
                    qq:qq,
                    phone:phone,
                    major:major,
                    college:college,
                    department:department,
                };
                console.log(data);
                $.ajax({
                    url:"RegJson",
                    method:'post',
                    type:"json",
                    data:data,
                    success:function (a) {
                        if(a.result==="success")
                        {
                            layer.msg('注册成功，请前往qq邮箱验证');
                        }else{
                            layer.msg(a.msg);
                        }
                    },
                    error:function () {
                        layer.msg("注册失败");
                    }
                })
            }
        }).validate({
            errorPlacement: function (error, element) {
                element.before(error);
            },
            rules: {
                confirm: {
                    equalTo: "#password"
                }
            }
        });
    });

</script>
<div class="middle-box">
    <p class="text-center">Copyright &copy; 计科王宇哲</p>
</div>
</html>
